<template>
	<view class="card-list">
		<ContentCard v-for="contents in list" @click="goTo(contents)" :key="contents.id" :title = "contents.title" :author="contents.author" :viewCount="contents.viewCount" :imageSrc="contents.imageUrl" />
	</view>
</template>

<script>
	import {myRequest} from '~@/util/api.js'
	import ContentCard from '~@/components/content-card.vue'
	import Mock from 'mockjs'
	export default {
		components: {
			ContentCard
		},
		data() {
			return {
				prevRequest:'',
				list:[]			
			}
		},
		methods: {
			goTo(contents){
				getApp().globalData.currentContentId = contents.id
				uni.navigateTo({
					url:"/pages/detail/detail",
					success: (res) => {
						res.eventChannel.emit('id',contents.id)
					}
				})
			},
			getContent(){
				let token = uni.getStorageSync('token');
				if (token) {
					// 获得页面信息
					myRequest({
						url: 'content',
						method: 'GET'
					}).then((res) => {
						if (res.statusCode == 200) {
							let newList = res.data;
							newList.map(content => content.imageUrl = `/static/picture/pic (${Math.floor(Math.random()*16+1)}).jpg`)
							this.list = [...this.list,...res.data]
						}
					})
				}
				else {
					uni.showToast({
					icon: "error",
					title: "请登录后重试"
					})
				}
			}
		},
		onLoad() {
			if (getApp().globalData.test) {
				Mock.mock(/content/, {
					requestId: "@datetime",
					"contents|1-10": [
						{
							"id|+1": "1",
							title:"标题1",
							authorId: "fsdgsdfg",
							authorName: "@cname",
							viewCount: 4567,
							imageUrl:'/static/logo.png'
						}
					]
				})
			}
			this.getContent()
		},
		onReachBottom() {
			this.getContent()
		},
		onPullDownRefresh() {
			this.list = []
			this.getContent()
			uni.stopPullDownRefresh()
		}
	}
</script>

<style>
	.card-list {
		display: grid;
		grid-template-columns: 375rpx 375rpx;
		row-gap: 10rpx;
		align-items: center;
		justify-items: center;
	}
</style>
